import styled from 'styled-components';
import {NavLink} from 'react-router-dom';
import React from 'react';
import Icon from './Icon';

const NavWrapper = styled.nav`
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
  background: white;

  > ul {
    display: flex;
    justify-content: space-around;

    > li {
      line-height: 24px;
      padding-top: 6px;

      > a {
        padding-bottom: 2px;
        display: flex;
        flex-direction: column;
        align-items: center;

        &.selected {
          color: steelblue;

          .icon {
            fill: steelblue;
          }
        }

        .icon {
          width: 32px;
          height: 32px;
        }
      }
    }
  }
`;

const Wrapper = styled.div`height: 64px;`;

function Nav() {
  return (
    <Wrapper>
      <NavWrapper>
        <ul>
          <li>
            <NavLink to="/tags" activeClassName="selected"
                     isActive={(match,location)=>!!(match || location.pathname === '/addTag')}>
              <Icon name="tag"/>
              标签
            </NavLink>
          </li>
          <li>
            <NavLink to="/money" activeClassName="selected">
              <Icon name="money"/>
              记一笔
            </NavLink>
          </li>
          <li>
            <NavLink to="/statistics" activeClassName="selected">
              <Icon name="chart"/>
              统计
            </NavLink>
          </li>
        </ul>
      </NavWrapper>
    </Wrapper>
  );
}

export default Nav;